import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Form, Button, Input, Icon } from 'antd'
import classNames from 'classnames'
import styles from './index.less'

const FormItem = Form.Item

const isDev = process.env.NODE_ENV === 'development'

class Login extends Component {
  static propTypes = {
    onSubmit: PropTypes.func.isRequired,
    loading: PropTypes.bool
  }

  static defaultProps = {
    className: '',
    defaultActiveKey: '',
    loading: false
  }

  handleSubmit = e => {
    e.preventDefault()
    const { form, onSubmit } = this.props
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        onSubmit(values)
      }
    })
  }

  renderFormItem = (options) => {
    const {form} = this.props
    const {getFieldDecorator} = form
    const {key, message, icon, value} = options
    return (
      <FormItem>
        {getFieldDecorator(key, {
          initialValue: value,
          rules: [
            {required: true, message},
          ],
        })(
          <Input
            size='large'
            prefix={<Icon type={icon} className={styles.prefixIcon} />}
            placeholder={message}
          />,
        )}
      </FormItem>
    )
  }
  render() {
    const { className, loading } = this.props
    const phone = isDev ? '18121375067' : ''
    const password = isDev ? 123456 : ''
    return (
      <div className={ classNames(className, styles.login) }>
        <Form onSubmit={ this.handleSubmit }>
          {this.renderFormItem({key: 'phone', message: '请输入手机号', icon: 'user', value: phone})}
          {this.renderFormItem({key: 'password', message: '请输入密码', icon: 'lock', value: password})}
          <FormItem>
            <Button
              size="large" className={styles.submit} type="primary" htmlType="submit"
              loading={loading}
            >登陆</Button>
          </FormItem>
        </Form>
      </div>
    )
  }
}

export default Form.create()(Login)
